import React, { Component } from 'react';
import { WeaSelect } from 'ecCom';
import { toJS } from 'mobx';
import { isNormal, isLayout } from '../component/typeof';
import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
export default class FieldIdSelect extends Component {

  getOptions = () => {
    const { coms } = this.props;
    let options = [];

    toJS(coms).forEach(com => {
      if ( isNormal(com) && isLayout(com) > -1 ) {
        let option = {
          key: com.uuid,
          showname: `${com.config.title} [${com.name}] `
        }

        options.push(option);
      }
    });

    return options;
  }
  
  render() {
    const { onChange } = this.props;

    return (
      <div className='sc-fieldid'>
        <div className='sc-fieldid-title'>{getLabel(526756,'字段ID')}：</div>
        <div className='sc-fieldid-options'>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@erlydy`}
            viewAttr='3'
            placeholder={getLabel(526757,'选择要操作的字段ID')}
            showSearch={true}
            optionFilterProp="children"
            notFoundContent='Not Found'
            options={this.getOptions()}
            onChange={onChange}
          />
        </div>
      </div>
    )
  }
}
